<template>
  <div class="supplier-page">
    <!-- 查询区域 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
    <el-form-item label="供应商编码">
        <el-input v-model="searchForm.code" placeholder="请输入供应商编码" clearable />
    </el-form-item>
    <el-form-item label="供应商名称">
        <el-input v-model="searchForm.name" placeholder="请输入供应商名称" clearable />
    </el-form-item>
    <el-form-item label="英文名称">
        <el-input v-model="searchForm.ename" placeholder="请输入供应商英文名称" clearable />
    </el-form-item>
    <el-form-item label="供应商简称">
        <el-input v-model="searchForm.shortName" placeholder="请输入供应商简称" clearable />
    </el-form-item>
    <el-form-item label="是否启用">
        <el-select v-model="searchForm.enabled" placeholder="是否启用" style="width: 180px;" clearable>
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>

    <!-- 操作按钮 -->
    <div class="toolbar">
      <el-button type="primary" @click="addDialogVisible = true">新增</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 16px;">
      <el-table-column prop="supplierCode" label="供应商编码" width="250" >
        <template #default="scope" >
          <el-link type="primary" @click="handleEdit(scope.row)">
            {{ scope.row.supplierCode }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="supplierName" label="供应商名称" width="200" />
      <el-table-column prop="supplierEngName" label="英文名称" width="250" />
      <el-table-column prop="supplierReferred" label="供应商简称" width="250" />
      <el-table-column prop="supplierLevel" label="供应商等级" width="180" />
      <el-table-column prop="supplierRating" label="供应商评分" width="180" />
      <el-table-column prop="supplierPhone" label="供应商电话" width="180" />
      <el-table-column prop="isLock" label="是否启用" width="200">
        <template #default="scope">
          <el-tag v-if="scope.row.isLock==true" type="success">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="descs" label="备注" width="120" />
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="text" size="small" style="color: #f56c6c;" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-bar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :page-sizes="[10, 20, 50, 100]"
      />
    </div>

    <!-- 添加供应商弹框 -->
    <el-dialog v-model="addDialogVisible" title="添加供应商" width="1500px" :close-on-click-modal="false">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="120px" class="add-supplier-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="供应商编码" prop="supplierCode">
              <el-input v-model="addForm.supplierCode" placeholder="请输入供应商编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="自动生成" >
              <el-switch v-model="addForm.autoCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称" prop="supplierName">
              <el-input v-model="addForm.supplierName" placeholder="请输入供应商名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商简称" prop="supplierShort">
              <el-input v-model="addForm.supplierShort" placeholder="请输入供应商简称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商商标" prop="supplierBrand">
              <el-input v-model="addForm.supplierBrand" placeholder="请输入供应商商标" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商英文名称" prop="supplierEngName">
              <el-input v-model="addForm.supplierEngName" placeholder="请输入供应商英文名称" />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="供应商简介" prop="supplierDesc">
              <el-input v-model="addForm.supplierDesc" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="供应商地址" prop="supplierAddress">
              <el-input v-model="addForm.supplierAddress" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商等级" prop="SupplierLevel">
              <el-select v-model="addForm.SupplierLevel" placeholder="请选择">
                <el-option label="正常" :value="1" />
                <el-option label="优质供应商" :value="2" />
                <el-option label="重点关注" :value="3" />
                <el-option label="劣质供应商" :value="4" />
                <el-option label="黑名单" :value="5" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商评分" prop="supplierRating">
              <el-input-number v-model="addForm.supplierRating" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商电话" prop="supplierPhone">
              <el-input v-model="addForm.supplierPhone" placeholder="请输入供应商电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商官网地址" prop="websiteAddress">
              <el-input v-model="addForm.websiteAddress" placeholder="请输入供应商官网地址" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商邮箱地址" prop="websiteEmail">
              <el-input v-model="addForm.websiteEmail" placeholder="请输入供应商邮箱地址" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A1" prop="firstName">
              <el-input v-model="addForm.firstName" placeholder="请输入联系人A1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A1-电话" prop="firstPhone">
              <el-input v-model="addForm.firstPhone" placeholder="请输入联系人A1-电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A1-邮箱" prop="firstEmail">
              <el-input v-model="addForm.firstEmail" placeholder="请输入联系人A1-邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A2" prop="secondName">
              <el-input v-model="addForm.secondName" placeholder="请输入联系人A2" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A2-电话" prop="secondPhone">
              <el-input v-model="addForm.secondPhone" placeholder="请输入联系人A2-电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A2-邮箱" prop="secondEmail">
              <el-input v-model="addForm.secondEmail" placeholder="请输入联系人A2-邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="creditCode">
              <el-input v-model="addForm.creditCode" placeholder="请输入统一社会信用代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="isLock">
              <el-radio-group v-model="addForm.isLock">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="备注" prop="descs">
              <el-input v-model="addForm.descs" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addSupplier">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑供应商弹框 -->
    <el-dialog v-model="editDialogVisible" title="编辑供应商" width="1200px" :close-on-click-modal="false">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="120px" class="add-supplier-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="供应商编码" prop="supplierCode">
              <el-input v-model="addForm.supplierCode" placeholder="请输入供应商编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="自动生成" >
              <el-switch v-model="addForm.autoCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称" prop="supplierName">
              <el-input v-model="addForm.supplierName" placeholder="请输入供应商名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商简称" prop="supplierShort">
              <el-input v-model="addForm.supplierShort" placeholder="请输入供应商简称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商商标" prop="supplierBrand">
              <el-input v-model="addForm.supplierBrand" placeholder="请输入供应商商标" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商英文名称" prop="supplierEngName">
              <el-input v-model="addForm.supplierEngName" placeholder="请输入供应商英文名称" />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="供应商简介" prop="supplierDesc">
              <el-input v-model="addForm.supplierDesc" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="供应商地址" prop="supplierAddress">
              <el-input v-model="addForm.supplierAddress" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商等级" prop="SupplierLevel">
              <el-select v-model="addForm.SupplierLevel" placeholder="请选择">
                <el-option label="正常" :value="1" />
                <el-option label="优质供应商" :value="2" />
                <el-option label="重点关注" :value="3" />
                <el-option label="劣质供应商" :value="4" />
                <el-option label="黑名单" :value="5" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商评分" prop="supplierRating">
              <el-input-number v-model="addForm.supplierRating" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商电话" prop="supplierPhone">
              <el-input v-model="addForm.supplierPhone" placeholder="请输入供应商电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商官网地址" prop="websiteAddress">
              <el-input v-model="addForm.websiteAddress" placeholder="请输入供应商官网地址" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商邮箱地址" prop="websiteEmail">
              <el-input v-model="addForm.websiteEmail" placeholder="请输入供应商邮箱地址" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A1" prop="firstName">
              <el-input v-model="addForm.firstName" placeholder="请输入联系人A1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A1-电话" prop="firstPhone">
              <el-input v-model="addForm.firstPhone" placeholder="请输入联系人A1-电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A1-邮箱" prop="firstEmail">
              <el-input v-model="addForm.firstEmail" placeholder="请输入联系人A1-邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A2" prop="secondName">
              <el-input v-model="addForm.secondName" placeholder="请输入联系人A2" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A2-电话" prop="secondPhone">
              <el-input v-model="addForm.secondPhone" placeholder="请输入联系人A2-电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人A2-邮箱" prop="secondEmail">
              <el-input v-model="addForm.secondEmail" placeholder="请输入联系人A2-邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="creditCode">
              <el-input v-model="addForm.creditCode" placeholder="请输入统一社会信用代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="isLock">
              <el-radio-group v-model="addForm.isLock">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="备注" prop="descs">
              <el-input v-model="addForm.descs" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <!-- 列表Tabs -->
      <el-tabs style="margin-top: 24px;">
        <el-tab-pane label="物料清单">
          <el-table :data="materialList" border style="width: 100%;">
            <el-table-column prop="materialCode" label="物料编码" />
            <el-table-column prop="materialName" label="物料名称" />
            <el-table-column prop="specification" label="规格型号" />
            <el-table-column prop="unit" label="单位" />
            <el-table-column prop="quantity" label="入库数量" />
            <el-table-column prop="batchNo" label="批次号" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="采购记录">
          <el-table :data="purchaseList" border style="width: 100%;">
            <el-table-column prop="purchaseNo" label="采购单号" />
            <el-table-column prop="purchaseDate" label="采购日期" />
            <el-table-column prop="materialName" label="物料名称" />
            <el-table-column prop="quantity" label="采购数量" />
            <el-table-column prop="price" label="单价" />
            <el-table-column prop="total" label="总价" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdate">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '@/api/http'

const addDialogVisible = ref(false)
const addFormRef = ref()
const addForm = reactive({
  "id":0,
  "supplierCode": "",
  "supplierName": "",
  "supplierReferred": "",
  "supplierEngName": "",
  "supplierDesc": "",
  "supplierAddress": "",
  "supplierLevel": 0,
  "supplierRating": 0,
  "websiteAddress": "",
  "websiteEmail": "",
  "supplierPhone": "",
  "firstName": "",
  "firstPhone": "",
  "firstEmail": "",
  "secondName": "",
  "secondPhone": "",
  "secondEmail": "",
  "creditCode": "",
  "isLock": 0,
  "logoAddress": "",
  "supplierImg": "",
  "descs": ""
})

// //添加的正则验证
const addRules = {
  supplierCode: [
    { required: true, message: '请输入供应商编码', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9_-]{2,20}$/, message: '编码2-20位字母、数字、下划线或短横线', trigger: 'blur' }
  ],
  supplierName: [
    { required: true, message: '请输入供应商名称', trigger: 'blur' },
    { min: 2, max: 50, message: '名称2-50个字符', trigger: 'blur' }
  ],
  supplierShort: [
  { required: true, message: '请输入供应商简称', trigger: 'blur' },
    { min: 0, max: 20, message: '简称最多20个字符', trigger: 'blur' }
  ],
  supplierBrand: [
  { required: true, message: '请输入商标', trigger: 'blur' },
    { min: 0, max: 20, message: '商标最多20个字符', trigger: 'blur' }
  ],
  supplierEngName: [
  { required: true, message: '请输入英文名称', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9\s]{0,50}$/, message: '英文名称最多50位字母或数字', trigger: 'blur' }
  ],
  supplierDesc: [
  { required: true, message: '请输入简介', trigger: 'blur' },
    { max: 200, message: '简介最多200个字符', trigger: 'blur' }
  ],
  supplierAddress: [
  { required: true, message: '请输入地址', trigger: 'blur' },
    { max: 100, message: '地址最多100个字符', trigger: 'blur' }
  ],
  supplierLevel: [
  { required: true, message: '请输入供应商等级', trigger: 'blur' },
  ],
  supplierRating: [
  { required: true, message: '请输入评分', trigger: 'blur' },
    { type: 'number', min: 0, max: 100, message: '评分0-100', trigger: 'blur' }
  ],
  supplierPhone: [
  { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  websiteAddress: [
  { required: true, message: '请输入网址', trigger: 'blur' },
  ],
  websiteEmail: [
  { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
  ],
  firstName: [
  { required: true, message: '请输入联系人A1', trigger: 'blur' },
    { max: 20, message: '联系人A1最多20个字符', trigger: 'blur' }
  ],
  firstPhone: [
  { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  firstEmail: [
  { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
  ],
  secondName: [
  { required: true, message: '请输入联系人A2', trigger: 'blur' },
    { max: 20, message: '联系人A2最多20个字符', trigger: 'blur' }
  ],
  secondPhone: [
  { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  secondEmail: [
  { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
  ],
  creditCode: [
  { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
    //{ pattern: /^[A-Za-z0-9]{18}$/, message: '统一社会信用代码18位字母或数字', trigger: 'blur' }
  ],
  isLock: [
  { required: true, message: '启用不能为空', trigger: 'blur' },
    { required: true, message: '请选择是否启用', trigger: 'change' }
  ],
  descs: [
  { required: true, message: '请输入备注', trigger: 'blur' },
    { max: 200, message: '备注最多200个字符', trigger: 'blur' }
  ]
}

//供应商管理的添加
const addSupplier=()=>{
  addFormRef.value.validate(valid => {
    if (valid) {
      http.post("/api/Supplier/AddSupplier",addForm)
      .then(res=>{
        if(res>0)
        {
          ElMessage.success("添加成功");
          addDialogVisible.value=false;
          getAllSupplierList();
        }
        else
        {
          ElMessage.success("添加失败");
        }
      })
    }
  })
}

// 反填方法
const handleEdit = (row) => {
  Object.keys(addForm).forEach(key => {
    if (row[key] !== undefined && row[key] !== null) {
      addForm[key] = row[key]
    }
  })
  editDialogVisible.value = true
}
//供应商的修改
const handleUpdate=() =>{
  addFormRef.value.validate(valid => {
    if (valid) {
      http.post('/api/Supplier/UpdateSupplier', addForm)
        .then(res => {
          if (res> 0) {
            ElMessage.success('修改成功')
            editDialogVisible.value = false;
            getAllSupplierList()
          } else {
            ElMessage.error('修改失败')
          }
        })
    }
  })
}

//查询条件
const searchForm = ref({
  
})

onMounted(()=>{
    getAllSupplierList();
})
//供应商的显示
const tableData=ref([]);
const getAllSupplierList=()=>{
    http.get("/api/Supplier/GetAllSupplierList")
    .then(res=>{
        tableData.value=res;
    })
}

//供应商的删除
const handleDelete=(row)=> {
  ElMessageBox.confirm(
    '确定要删除该供应商吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      http.get('/api/Supplier/DeleteSupplier?id='+row.id)
      .then(res => {
        if (res> 0) {
          ElMessage.success('删除成功')
          getAllSupplierList()
        } else {
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '您取消了操作',
      })
    })
}

const total = ref(9)
const pageSize = ref(10)
const currentPage = ref(1)

function handleSearch() {
  // TODO: 调用接口，带上 searchForm.value 作为参数
}
function handleReset() {
  searchForm.value = { code: '', name: '', ename: '', shortName: '', enabled: '' }
  handleSearch()
}
function handleSizeChange(size) {
  pageSize.value = size
  handleSearch()
}
function handlePageChange(page) {
  currentPage.value = page
  handleSearch()
}

const editDialogVisible = ref(false);


// 物料清单数据
const materialList = ref([
  { materialCode: 'IF20250522009', materialName: '铝母体', specification: '003', unit: '003', quantity: 1, batchNo: '20200202' },
  { materialCode: 'IF20250522010', materialName: '半成品', specification: '22', unit: 'T', quantity: 1, batchNo: '20200202' },
  { materialCode: 'IF20250522011', materialName: '交联绝缘', specification: '003', unit: '003', quantity: 1000, batchNo: '20200202' },
  { materialCode: 'IF20250522012', materialName: '成缆带', specification: '003', unit: '003', quantity: 1, batchNo: '20200202' },
  { materialCode: 'IF20250523077', materialName: '丙酸及其钠盐', specification: '', unit: 'g', quantity: 2, batchNo: '20200202' }
])

// 采购记录数据
const purchaseList = ref([
  { purchaseNo: 'CG20240601001', purchaseDate: '2024-06-01', materialName: '铝母体', quantity: 10, price: 100, total: 1000 },
  { purchaseNo: 'CG20240601002', purchaseDate: '2024-06-01', materialName: '半成品', quantity: 5, price: 200, total: 1000 }
])

</script>

<style lang="less" scoped>
.supplier-page {
  padding: 24px;
  background: #fff;
  min-height: 100vh;
}
.search-form {
  max-width: 1100px;
  margin: 0 auto 16px auto;
  padding: 20px 32px 8px 32px;
  background: #fafbfc;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
}
.search-form .el-form-item {
  flex: 1 1 320px;
  max-width: 360px;
  min-width: 220px;
  margin-bottom: 0;
  margin-right: 0 !important;
}
.toolbar {
  margin: 12px 0 8px 0;
  display: flex;
  gap: 12px;
}
.pagination-bar {
  margin: 24px 0 0 0;
  display: flex;
  justify-content: flex-end;
}
.add-supplier-form {
  margin-top: 10px;
}
</style>
